<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../fontawesome-5.15.4/css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <!--小于768px加载mobile.css-->
    <link rel="stylesheet" media="screen and (max-width: 768px)" href="./css/mobile.css">
    <!--大于1100px加载-->
    <link rel="stylesheet" media="screen and (min-width:1100px)" href="./css/widescreen.css">
</head>
<body>
<nav class="navbar">
    <h1 class="logo">
        <span class="text-primary">
            <i class="fas fa-book-open"></i>
        </span>
        米修在线
    </h1>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#what">What</a></li>
        <li><a href="#who">Who</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>
<!--header:home-->
<header id="home" class="home">
    <div class="home-content">
        <h1 class="l-heading">欢迎来到米修在线</h1>
        <p class="lead">
            Morbi Dapibus Malesuada Curae Inceptos Cursus Scelerisque Nulla Augue Natoque Varius Incursus
        </p>
        <a href="#what" class="btn">阅读更多</a>
    </div>
</header>
<section id="what" class="what bg-light py-1">
    <div class="container">
        <h2 class="m-heading text-center">
            <span class="text-primary">What</span> We Do
        </h2>
        <div class="items">
            <div class="item">
                <i class="fas fa-university fa-2x"></i>
                <div>
                    <h3>前端基础课</h3>
                    <p>Morbi Dapibus Malesuada Curae Inceptos Cursus Scelerisque Nulla Augue Natoque Varius</p>
                </div>
            </div>
            <div class="item">
                <i class="fas fa-book-reader fa-2x"></i>
                <div>
                    <h3>前端进阶课</h3>
                    <p>Morbi Dapibus Malesuada Curae Inceptos Cursus Scelerisque Nulla Augue Natoque Varius</p>
                </div>
            </div>
            <div class="item">
                <i class="fas fa-pencil-alt fa-2x"></i>
                <div>
                    <h3>前端高阶课</h3>
                    <p>Morbi Dapibus Malesuada Curae Inceptos Cursus Scelerisque Nulla Augue Natoque Varius</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="who" class="who">
    <div class="who-img">

    </div>
    <div class="who-text bg-dark p-2">
        <h2 class="m-heading"><span class="text-primary">Who</span> We Are</h2>
        <p>
            Morbi Dapibus Malesuada Curae Inceptos Cursus Scelerisque Nulla Augue Natoque Varius Morbi Dapibus Malesuada Curae Inceptos Cursus Scelerisque Nulla Augue Natoque Varius
            Morbi Dapibus Malesuada Curae Inceptos Cursus Scelerisque Nulla Augue Natoque Varius Morbi Dapibus Malesuada Curae Inceptos Cursus Scelerisque Nulla Augue Natoque Varius
        </p>
        <h3>Our Team</h3>
        <ul class="list">
            <li>Mark Smith: CEO</li>
            <li>Mark Smith: CFO</li>
            <li>Mark Smith: CEO</li>
            <li>Mark Smith: CEO</li>
        </ul>
    </div>
</section>
<section  class="clients py-1">
    <div class="container">
        <h2 class="m-heading text-center"><span class="text-primary">Our</span> Clients</h2>
        <div class="items py-1">
            <div><img src="./img/pinia.jpg" alt=""></div>
            <div><img src="./img/pinia.jpg" alt=""></div>
            <div><img src="./img/pinia.jpg" alt=""></div>
            <div><img src="./img/pinia.jpg" alt=""></div>
            <div><img src="./img/pinia.jpg" alt=""></div>
        </div>
    </div>
</section>
<section id="contact" class="contact">
    <div class="contact-form bg-primary p-2">
        <h2 class="m-heading">Contact Us</h2>
        <p>如有疑问请填写以下信息联系我们！</p>
        <form action="">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" name="name" id="name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="text" name="email" id="email" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <label for="phone">电话</label>
                <input type="text" name="phone" id="phone" placeholder="请输入电话">
            </div>
            <div class="form-group">
                <label for="info">反馈信息</label>
                <textarea name="info" id="info" placeholder="请输入内容"></textarea>
            </div>
            <input type="submit"  class="btn btn-dark">
        </form>
    </div>
    <div class="contact-img"></div>
</section>
<footer class="main-footer bg-dark text-center py-1">
    <div class="container">
        <p>米修在线 &copy; 2024, All Rights Reserved</p>
    </div>
</footer>
</body>
</html>
